<!--
 * @Description: 
 * @Version: @1.0.0
 * @Autor: YJY
 * @Date: 2021-06-08 15:09:40
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:22:33
-->

<template>
  <div class="app-container">
    <div class="title">
      <div @click="chiQy" :class="active == 1 ? 'active' : ''">
        <span>企业信息</span>
      </div>
      <div
        @click="chiZh"
        style="margin-left: 40px"
        :class="active == 2 ? 'active' : ''"
        v-if="userType == 3"
      >
        <span>账号信息</span>
      </div>
      <div
        @click="chiBd"
        :class="active == 3 ? 'active' : ''"
        v-if="userType == 2"
        style="margin-left: 40px"
      >
        <span>绑定服务商</span>
      </div>
      <div
        @click="chiXX"
        :class="active == 4 ? 'active' : ''"
        v-if="userType == 2"
        style="margin-left: 40px"
      >
        <span>绑定学校</span>
      </div>
    </div>
    <div class="info infoOne" v-if="active == 1">
      <div class="info-title">账号相关信息</div>
      <el-form
        :model="infoFrom"
        ref="infoFrom"
        :rules="infoRules"
        label-position="top"
        :inline="false"
        size="normal"
      >
        <el-form-item label="企业号" prop="serialNumber">
          <div style="display: flex">
            <el-input
              v-model="infoFrom.serialNumber"
              disabled
              style="width：330px"
            ></el-input>
            <span style="margin-left: 20px; color: #666">
              注：员工可在加入团队时候搜索该企业号，可快速加入企业
            </span>
          </div>
        </el-form-item>
        <el-form-item label="企业名称" prop="companyName">
          <el-input
            v-model="infoFrom.companyName"
            style="width：330px"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业简称" prop="abbreviation">
          <div style="display: flex">
            <el-input
              v-model="infoFrom.abbreviation"
              style="width：330px"
            ></el-input>
            <span style="margin-left: 20px; color: #666"
              >注：用于更换系统logo显示</span
            >
          </div>
        </el-form-item>
        <el-form-item label="企业LOGO" v-if="logoShow">
          <el-upload
            class="Logo"
            ref="upload"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/jpeg,image/png"
            :limit="1"
            :on-change="getFile"
            :file-list="fileList"
            :on-remove="handleRemove"
            :class="{ disabled: fileList.length > 0 }"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div class="tip">
            点击图片，可更换头像 支持JEPG、PNG、BMP格式 大小不超过5M
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-else-if="active == 2" class="info">
      <div class="basics">企业平台信息</div>
      <div class="Usage">
        <div class="usage-one">
          <el-progress
            type="circle"
            :percentage="percentageOne"
            :show-text="false"
            :width="141"
          >
          </el-progress>
          <div style="margin-top: 40px; margin-bottom: 10px">
            已使用用户个数：{{ infoFrom.useNumber }}/人
          </div>
          <div>已购买用户个数：{{ infoFrom.allNumber }}/人</div>
          <div class="userSurplus">
            <div class="userSurplus-num">{{ infoFrom.lastNumber }}</div>
            <div>剩余可用</div>
          </div>
        </div>
        <div class="usage-two">
          <el-progress
            type="circle"
            :percentage="percentageTwo"
            :show-text="false"
            :width="141"
          ></el-progress>
          <div style="margin-top: 40px; margin-bottom: 10px">
            已使用容量：{{ 20 }} G
          </div>
          <div>已购买容量：{{ 100 }} G</div>
          <div class="userSurplus">
            <div class="userSurplus-num">{{ 80 }}</div>
            <div>剩余可用</div>
          </div>
        </div>
        <div class="usage-three">
          <el-progress
            type="circle"
            :percentage="percentageThree"
            :show-text="false"
            :width="141"
          ></el-progress>
          <div style="margin-top: 40px; margin-bottom: 10px">
            开始时间：{{ infoFrom.openDate | openDate }}
          </div>
          <div>结束时间：{{ infoFrom.expiryDate | expiryDate }}</div>
          <div class="userSurplus">
            <div class="userSurplus-num">{{ infoFrom.lastDate }}</div>
            <div>剩余天数</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="active == 3" class="info">
      <div class="fw-table">
        <div class="relation">
          <el-button type="primary" size="default" @click="relation">
            关联服务商
          </el-button>
        </div>
        <el-table :data="Data" :height="tableHight">
          <template slot="empty" class="emptyBg">
            <img src="@/assets/images/empty.jpg" alt="" />
          </template>
          <el-table-column label="服务商名称" prop="deptName">
          </el-table-column>
          <el-table-column label="服务商ID" prop="serialNumber">
          </el-table-column>
          <el-table-column label="联系方式" prop="phone"> </el-table-column>
          <el-table-column label="关联时间" prop="createTime">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span @click="Unlock(scope.row)" class="unlock">解绑</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        layout=" ->,total, sizes, prev, pager, next, jumper "
        :total="total"
      >
      </el-pagination>
    </div>
    <div v-else-if="active == 4" class="info">
      <div class="fw-table">
        <div class="relation">
          <el-button type="primary" size="default" @click="bindingSchool">
            关联学校
          </el-button>
        </div>
        <el-table :data="Data" :height="tableHight">
          <template slot="empty" class="emptyBg">
            <img src="@/assets/images/empty.jpg" alt="" />
          </template>
          <el-table-column label="学校名称" prop="sName"> </el-table-column>
          <el-table-column label="学校ID" prop="sSerialNumber">
          </el-table-column>
          <el-table-column label="联系方式" prop="phone"> </el-table-column>
          <el-table-column label="关联时间" prop="createTime">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span @click="schoolUnlock(scope.row)" class="unlock">解绑</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        layout=" ->,total, sizes, prev, pager, next, jumper "
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 关联服务商 -->
    <el-dialog
      title="关联服务商"
      :visible.sync="relationShow"
      width="30%"
      @close="relationClose"
      :close-on-click-modal="false"
    >
      <el-form
        :model="fwForm"
        ref="fwForm"
        :rules="fwRules"
        label-position="top"
        :inline="false"
        size="normal"
        v-if="relationShow"
      >
        <el-form-item label="服务商ID" style="margin-left: 25px" prop="fwId">
          <el-input
            v-model="fwForm.fwId"
            style="width: 330px"
            placeholder="请输入服务商ID"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="relationShow = false">取消</el-button>
        <el-button type="primary" @click="FwSubmit">保存</el-button>
      </span>
    </el-dialog>
    <!-- 关联学校 -->
    <el-dialog
      title="关联学校"
      :visible.sync="schoolShow"
      width="30%"
      @close="schoolClose"
      :close-on-click-modal="false"
    >
      <el-form
        :model="schoolForm"
        ref="schoolForm"
        :rules="schoolRules"
        label-position="top"
        :inline="false"
        size="normal"
        v-if="schoolShow"
      >
        <el-form-item label="学校ID" style="margin-left: 25px" prop="schoolId">
          <el-input
            v-model="schoolForm.schoolId"
            style="width: 330px"
            placeholder="请输入学校ID"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="schoolShow = false">取消</el-button>
        <el-button type="primary" @click="schoolSubmit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  relate,
  getList,
  unRelate,
  cRelateS,
  showCRelateS,
  cUnRelateS,
} from "@/api/enterprise/accountManag";
import { getInfo, updateLogo } from "@/api/sys";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["userType"]),
  },
  filters: {
    openDate: function (value) {
      if (value == "") {
        value = "-";
      }
      return value;
    },
    expiryDate: function (value) {
      if (value == "") {
        value = "-";
      }
      return value;
    },
  },
  data() {
    return {
      tableHight: window.innerHeight - 350,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      fwRules: {
        fwId: [
          {
            required: true,
            message: "请输入服务商ID",
            trigger: "blur",
          },
        ],
      },
      schoolForm: {
        schoolId: "",
      },
      schoolRules: {
        schoolId: [
          {
            required: true,
            message: "请输入学校ID",
            trigger: "blur",
          },
        ],
      },
      fwForm: {
        fwId: "",
      },
      schoolShow: false,
      relationShow: false, //关联服务商
      Data: [],
      active: 1,
      percentageOne: "",
      percentageTwo: 20,
      percentageThree: "",
      chiooseInfo: true,
      infoFrom: {
        companyName: "",
        abbreviation: "",
      },
      infoRules: {
        serialNumber: [
          {
            required: true,
          },
        ],
        companyName: [
          {
            required: true,
            message: "请填写企业名称",
            trigger: "blur",
          },
        ],
        abbreviation: [
          {
            required: true,
            message: "请填写企业简称",
            trigger: "blur",
          },
          {
            min: 1,
            max: 6,
            message: "企业简称只允许1-6个字符",
            trigger: "blur",
          },
        ],
      },
      logoShow: true,
      fileList: [],
      fileList1: [],
      basicRules: {
        companyName: [
          {
            required: true,
            message: "请填写企业名称",
            trigger: "blur",
          },
        ],
      },
      userInfo: {},
      enterpriseForm: {
        companyName: "",
      },
      basicForm: {
        companyName: "",
      },
      file: {},
      file1: {},
    };
  },
  created() {
    this.getEnterpriseInfo();
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.tableHight = window.innerHeight - 350;
      })();
    };
  },
  activated() {
    this.tableHight = window.innerHeight - 350;
  },
  methods: {
    // 获取学校列表
    getSchoolList() {
      showCRelateS({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }).then((res) => {
        this.Data = res.rows;
        this.total = res.total;
      });
    },
    // 关闭关联学校
    schoolSubmit() {
      cRelateS({
        serialNumber: this.schoolForm.schoolId,
      }).then((res) => {
        this.$message.success(res.msg);
        this.getSchoolList();
        this.schoolShow = false;
      });
    },
    // 关闭绑定学校
    schoolClose() {
      this.schoolForm.schoolId = "";
    },
    // 绑定学校
    bindingSchool() {
      this.schoolShow = true;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      if (this.active == 3) {
        this.chiBd();
      } else if (this.active == 4) {
        this.chiXX();
      }
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      if (this.active == 3) {
        this.chiBd();
      } else if (this.active == 4) {
        this.chiXX();
      }
    },
    // 解绑
    Unlock(row) {
      this.$confirm("是否确认与该服务商解绑?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return unRelate({
            deptId: row.deptId,
          });
        })
        .then((res) => {
          this.getList();
          this.$message.success(res.msg);
        });
    },
    // 学校解绑
    schoolUnlock(row) {
      this.$confirm("是否确认与该学校解绑?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return cUnRelateS({
            id: row.id,
          });
        })
        .then((res) => {
          this.$message.success(res.msg);
          this.getSchoolList();
        });
    },
    // 获取服务商列表
    getList() {
      getList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }).then((res) => {
        this.Data = res.rows;
        this.total = res.total;
      });
    },
    // 关联服务商
    relation() {
      this.relationShow = true;
    },
    // 服务商id绑定确定
    FwSubmit() {
      this.$refs.fwForm.validate((valid) => {
        if (!valid) return;
        relate({
          serviceProviderId: this.fwForm.fwId,
        }).then((res) => {
          this.$message.success(res.msg);
          this.getList();
          this.relationShow = false;
        });
      });
    },
    // 关闭服务商绑定dialog
    relationClose() {
      this.fwForm.fwId = "";
    },
    chiXX() {
      this.pageNum = 1;
      this.active = 4;
      this.total = 0;
      this.getSchoolList();
    },
    chiBd() {
      this.pageNum = 1;
      this.total = 0;
      this.active = 3;
      this.getList();
    },
    chiQy() {
      this.active = 1;
    },
    chiZh() {
      this.active = 2;
    },
    onSubmit() {
      this.$refs.infoFrom.validate((valid) => {
        if (!valid) return;
        let fd = new FormData();
        fd.append("file", this.file.raw);
        fd.append("companyName", this.infoFrom.companyName);
        fd.append("abbreviation", this.infoFrom.abbreviation);
        updateLogo(fd).then((res) => {
          this.$message.success(res.msg);
          this.$store.dispatch("getLogo");
        });
      });
    },
    handleRemove1() {
      this.fileList1 = [];
    },
    // 照片移除
    handleRemove() {
      this.fileList = [];
    },

    getFile(file) {
      this.fileList.push(file);
      this.file = file;
      console.log(this.fileList);
    },
    getFile1(file) {
      this.fileList1.push(file);
      this.file1 = file;
    },
    // 获取企业信息
    getEnterpriseInfo() {
      getInfo().then((res) => {
        this.infoFrom = res;
        this.userInfo = res;
        this.basicForm.companyName = res.companyName;
        this.enterpriseForm.companyName = res.companyName;
        this.percentageOne = res.numberPerc;
        this.percentageThree = res.datePerc;
        if (res.logo) {
          this.fileList.push({
            name: "",
            url: res.logo,
          });
        }
        if (res.license) {
          this.fileList1.push({
            name: "",
            url: res.license,
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.app-container {
  margin-top: 5px;
  height: 91vh;
}
.title {
  width: 100%;
  height: 80px;
  display: flex;
  background-color: #fff;
  line-height: 80px;
  border-bottom: 1px solid #ececec;

  img {
    height: 30px;
    margin-left: 30px;
    vertical-align: middle;
  }
  span {
    font-size: 16px;
  }
}
.info {
  margin-top: 4px;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  margin-top: 24px;
  .info-title {
    position: relative;
    margin-top: 40px;
    margin-left: 10px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    // font-weight: 700;
    color: #2b2b2b;
    &::before {
      content: "";
      position: absolute;
      top: 3px;
      left: -10px;
      width: 2px;
      height: 14px;
      background-color: #0e62fa;
    }
  }
  .info-content {
    margin: 20px 10px;
    font-size: 14px;
    tr {
      line-height: 30px;
      td {
        width: 350px;
      }
    }
  }
}
.content {
  margin-top: 15px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .content-box {
    padding: 40px 30px;
    width: 49.5%;
    height: 550px;
    background-color: #fff;
    box-sizing: border-box;
    .info-title {
      position: relative;
      margin-left: 10px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      // font-weight: 700;
      color: #2b2b2b;
      &::before {
        content: "";
        position: absolute;
        top: 3px;
        left: -10px;
        width: 2px;
        height: 14px;
        background-color: #0e62fa;
      }
    }
    .content-content {
      font-size: 14px;
      margin-top: 20px;
      margin-left: 10px;
      .el-input {
        margin-top: 10px;
        width: 350px;
        margin-bottom: 20px;
      }

      .el-button {
        margin-top: 30px;
        width: 100px;
      }
    }
  }
}
// /deep/ .el-upload--picture-card {
//   width: 350px;
//   height: 100px;
// }
// /deep/ .el-icon-plus:before {
//   position: relative;
//   top: -20px;
//   font-size: 18px;
//   color: #3f84fb;
// }
.infoOne {
  /deep/ .el-input {
    width: 330px;
  }
}

.basics {
  position: relative;
  font-size: 14px;
}
.basics::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 1px;
  width: 3px;
  height: 14px;
  background: #1267fa;
}
.Usage {
  display: flex;
  margin-top: 40px;
  .usage-one {
    width: 200px;
    height: 300px;
    position: relative;
    text-align: center;
    .userSurplus {
      position: absolute;
      top: 35px;
      left: 71px;
      .userSurplus-num {
        font-size: 40px;
        font-family: DINAlternate-Bold, DINAlternate;
        // font-weight: bold;
        color: #2b2b2b;
      }
    }
  }
  .usage-two {
    width: 200px;
    height: 300px;
    position: relative;
    margin-left: 100px;
    margin-right: 100px;
    text-align: center;
    .userSurplus {
      position: absolute;
      top: 35px;
      left: 71px;
      .userSurplus-num {
        font-size: 40px;
        font-family: DINAlternate-Bold, DINAlternate;
        // font-weight: bold;
        color: #2b2b2b;
      }
    }
  }
  .usage-three {
    width: 200px;
    height: 300px;
    position: relative;
    text-align: center;
    .userSurplus {
      position: absolute;
      top: 35px;
      left: 65px;
      .userSurplus-num {
        font-size: 40px;
        font-family: DINAlternate-Bold, DINAlternate;
        // font-weight: bold;
        color: #2b2b2b;
      }
    }
  }
}
.active {
  font-weight: 700;
  border-bottom: 2px solid #1267fa;
  span {
    color: #1267fa;
  }
}
.tip {
  font-size: 12px;
  color: #dd6e6e;
}
.unlock {
  color: #1267fa;
  cursor: pointer;
}
.el-pagination {
  margin-top: 40px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #2b2b2b !important;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
/deep/ .disabled .el-upload--picture-card {
  display: none;
}
/deep/ .el-input__inner {
  color: #2b2b2b !important;
}
</style>